<template>
    <div class="login-container">
        <div class="top-nav-bar" v-bind="obj">
            <van-nav-bar title="会员登录"  left-arrow  @click-left="onClickLeft"/>
        </div>
        <div class="middle-box">
            <div class="title-container">会员登录</div>
            <van-field v-model.trim="mobile" type="tel"  placeholder="请输入手机号" />
            <div class="graphics-box">
                <van-field v-model.trim="picCode"  placeholder="请输入图形验证码"/>
                <img v-if="picUrl" :src="picUrl" alt="" @click="getImageUrl">
            </div>
            <van-field
                v-model="msgCode"
                center
                clearable
                placeholder="请输入短信验证码"
                >
                <template #button>
                    <van-button  size="small" type="primary" :disabled="btnDisabled" @click="btnClickHandle">{{ btnDisabled ? `(${countdown})秒后重新发送` : '发送验证码' }}</van-button>
                </template>
            </van-field>
            <div class="text-container">默认验证码：246810</div>
            <div class="text-container">测试自动化部署是否成功</div>
            <van-button class="btn-container" type="primary" size="large" @click="getLogin">登录</van-button>
        </div>
    </div>
</template>

<script>
import { getImageUrl, getIphoneVerify, getLogin } from '@/api/login/index'
import { mapMutations } from 'vuex'
export default {
    name: 'login',
    data () {
        return {
            mobile: '',
            picCode: '',
            msgCode: '',
            // 验证码倒计时
            countdown: 60,
            btnDisabled: false,
            // 关闭定时器
            timer: null,
            // 图片地址
            picUrl: '',
            // 图片的key
            picKey: '',

            // 动态无参数绑定多个值
            obj: {
                // class: 'box',
                // id:'id-box'
            }
        }
    },
    created() {
        this.getImageUrl()
     },
    methods: {
        ...mapMutations('m_user',['updateToken','updateId']),
        // 获取图形验证码
        async getImageUrl() { 
            const res = await getImageUrl()
            if (res.status === 200) {
                this.picUrl = res.data.base64
                this.picKey = res.data.key
            }
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        // 校验手机验证码是否为空
        btnClickHandle() { 
            // 先判断手机号是否有值,有值之后才判断手机号是否正确
            if (!this.mobile) {
                this.$toast('手机号不能为空!')
            } else { 
                // 有值
                // 利用正则表达式校验手机号是否正确
                const phoneReg = /^1[3-9]\d{9}$/
                // 先去除可能的空格, 符号
                const phone = this.mobile.replace(/\D/g,'')
                if (!phoneReg.test(phone)) return this.$toast('手机号格式不正确')
                // 发送请求了, 发送请求的那一刻,开始倒计时, 请求失败了, 按钮恢复原来的状态,这里没有请求,直接倒计时
                this.countdown = 60
                this.btnDisabled = true

                // 发送请求了
                this.getIphoneVerify()
                this.$toast('验证码已发送,请求注意查收!')
                this.timer = setInterval(() => {
                    this.countdown--
                    if (this.countdown < 0) { 
                        this.btnDisabled = false
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }, 1000)
            }
        },
        // 校验输入框内容
        validFn() {
            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
                this.$toast('请输入正确的手机号')
                return false
            }
            if (!/^\w{4}$/.test(this.picCode)) {
                this.$toast('请输入正确的图形验证码')
                return false
            }
            return true
        },
        // 获取手机号验证码
        async getIphoneVerify() {
            if (!this.validFn()) return 
            const params = {
                picCode: this.picCode,
                catchaKey: this.picKey,
                mobile: this.mobile
            }
            // await 只会等到成功的promise
            const res = await getIphoneVerify(params)
            console.log(res,'获取手机号验证码');
        },
        // 登录
        async getLogin() { 
            // 登录之前需要校验, 手机号是否正确, 图形验证是否正确,只有正确了才能进行登录
            if (!this.validFn()) {
                return
            }
            const form = {
                // 是否第三方
                isParty: false,
                mobile: this.mobile,
                partyData: {},
                smsCode: this.msgCode,
                platform: 'H5'
            }
            const { data } = await getLogin(form)
            // console.log(res, '登录接口获取token,和用户id');

            // 登录成功之后, 跳转到首页, 给一个提示
            this.$toast('登陆成功!')

            // 登录成功之后, 将token存储到vuex中
            this.updateToken(data)
             const url = this.$route.query.backUrl || '/'
            this.$router.replace(url)
        },
    },
    // 离开页面清除定时器
    destroyed() { 
        clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>
.login-container {
    .middle-box {
        padding: 100px 50px 0 50px;
        // box-sizing: border-box;
        .title-container {
            font-size: 20px;
            text-align: center;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .graphics-box {
            display: flex;
            padding-right: 16px;

            img {
                width: 100px;
                height: 44px;
            }
        }
        .btn-container {
            border-radius: 50px;
        }
    }
}
.text-container {
  font-size: 12px;
  color: gray;
}
</style>